<template>
    <div>
        <el-space :fill="true" style="width: 100%">
            <el-card  class="box-card">
                搜索相关
            </el-card>
            <el-card  class="box-card">
                 <el-table
                    :data="tableData"
                    style="width: 100%; margin-bottom: 20px"
                    row-key="id"
                    :tree-props="{children:'child'}"
                    >
                    <el-table-column prop="name" label="菜单名称"  />
                    <el-table-column prop="icon" label="图标"  />
                    <el-table-column prop="menu" label="是否为菜单">
                        <template #default="scope">
                            {{ scope.row.menu == 1 ? '是' : '否' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="" label="权限标识"  />
                    <el-table-column prop="frontpath" label="路由地址"  />
                    <el-table-column prop="create_time" label="创建时间"  />
                    <el-table-column label="操作">
                    <template #default="scope">
                       <el-space>
                           <el-link type="primary" href="javascript:;" @click="addMenu(scope.row,1)">新增</el-link>
                            <el-link type="primary" @click="addMenu(scope.row,2)">编辑</el-link>
                            <el-link type="primary">删除</el-link>
                       </el-space>
                    </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-space>
        <!-- 添加编辑弹窗 -->
        <add-modal ref="addmodal" :title="title+'菜单'" @submit="submit">
             <el-form
                ref="ruleFormRef"
                style="max-width: 600px"
                :model="form"
                :rules="rules"
                label-width="auto"
                class="demo-ruleForm"
                status-icon
            >
            <el-form-item label="父级菜单" prop="rule_id">
                 <el-tree-select
                    v-model="form.rule_id"
                    :data="tableData"
                    check-strictly
                    empty-text=" "
                    node-key="id"
                    :render-after-expand="false"
                    style="width: 240px"
                     clearable
                    :props="{label:'name',value:'id',children:'child'}"
                />
            </el-form-item>
            <el-form-item label="菜单类型" prop="menu" required>
                <el-radio-group v-model="form.menu">
                    <el-radio :value="1">菜单</el-radio>
                    <el-radio :value="0">页面</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="菜单名称" prop="name" required>
                <el-input v-model="form.name" placeholder="请输入菜单名称" />
            </el-form-item>
            <el-form-item label="菜单图标" prop="icon">
                <el-select v-model="form.icon" placeholder="请选择菜单图标" style="width:400px">
                    <template #default>
                       <div class="option_box">
                            <div class="option_list" v-for="item in iconJson.glyphs" :key="item.icon_id">
                                <el-option :value="item.font_class">
                                    <template #default>
                                       <div class="option_name">
                                        <span :class="`iconfont icon-${item.font_class}`"></span>
                                    </div>
                                    </template>
                                    
                                </el-option>
                            </div>
                       </div>
                       
                    </template>
                </el-select>
            </el-form-item>
            <el-form-item label="路由地址" prop="frontpath">
                <el-input v-model="form.frontpath" placeholder="请输入路由地址" />
            </el-form-item>
             <el-form-item label="请求方式" prop="method">
                <el-select v-model="form.method" placeholder="请选择请求方式">
                    <el-option label="GET" value="GET"></el-option>
                    <el-option label="POST" value="POST"></el-option>
                    <el-option label="PUT" value="PUT"></el-option>
                    <el-option label="DELETE" value="DELETE"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="排序" prop="order">
                <el-input-number :min='0' v-model="form.order" />
            </el-form-item>
            <el-form-item label="菜单状态" prop="status">
                <el-radio-group v-model="form.status">
                    <el-radio label="正常" :value="1"></el-radio>
                    <el-radio label="停用" :value="0"></el-radio>
                </el-radio-group>
            </el-form-item>
          </el-form>
        </add-modal>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import {getRuleList,saveRule} from '@/api/manager.js'
import iconJson from '@/assets/font/iconfont.json'

const currentPage = ref(1)
const tableData = ref([])//表格数据
//弹窗ref
const addmodal = ref(null)
const title = ref('新增')
//获取菜单
const getMenuList = async () => {
    const {list} = await getRuleList(currentPage.value)
    tableData.value = list
}
getMenuList()

//添加相关
const form = ref({
    rule_id: 0,
    menu:0,
    name: '',
    icon: '',
    frontpath: '',
    method: 'GET',
    order: 0,
    status: 1
})
//校验
const rules = reactive({
    menu: [
        { required:true, message:'菜单类型不能为空' }
    ],
    name: [
        {required: true, message:'菜单名称不能为空'}
    ]
})
const addMenu = (item,type) => {
    title.value = '新增'
    if(type == 0){
        //一级新增
    }else if(type == 1){
        //子级新增
        form.value.rule_id = item.id
    }else if(type == 2){
        //编辑
        title.value='编辑'
        form.value = {...form.value,...item}
    }
    addmodal.value.openDialog()
}
//点击提交数据
const submit = async () => {
    const res = await saveRule(form.value)
    console.log(res)
    if(res){
        alert('更新成功')
        addmodal.value.closeDialog()
        
    }
}





</script>

<style lang='less' scoped>
.option_box {
    display: flex;
  .option_list {
      .option_name {
        span {
            font-size:16px;
        }
      }
    }
}

</style>